<template>
  <div class="about">
    <div id="vs"></div>
  </div>
</template>
<script>
import Player from "xgplayer";
export default {
  name: "about",
  props: {
    width: {
      type: [Number, String],
      default: "1920"
    },
    height: {
      type: [Number, String],
      default: "800"
    },
    url: {
      required: true
    }
  },
  data() {
    return {
      player: null
    };
  },

  mounted() {
    this.videoEvent();
  },
  methods: {
    videoEvent() {
      this.player = new Player({
        id: "vs",
        //   url: "https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4",
        url: this.url,
        width: this.width,
        height: this.height,
        volume: 0.6, //预设音量大小，参考值：0 ~ 1
        // autoplay: true, //自动播放
        // loop: true, // 循环播放
        // poster:
        //   "https://xytest-files.oss-cn-beijing.aliyuncs.com/medio/index/3d85fa01ee21d598a3cdc38ffdfea06.png",
        poster: require("@/assets/images/cover.png"),
        // download: true, //设置download控件显示
        // pip: true, //画中画
        leavePlayerTime: 5000, //鼠标移出播放器范围5s后隐藏控件
        // closeInactive: true, //使播放器控制栏常驻不隐藏
        allowSeekPlayed: true, //进度条只能拖动到已播过部分
        fluid: true,
        //   definitionActive: "hover",
        //弹幕
        //   danmu: {
        //     comments: [
        //       {
        //         duration: 15000,
        //         id: "1",
        //         start: 3000,
        //         txt: "长弹幕长弹幕长弹幕长弹幕长弹幕",
        //         style: {
        //           //弹幕自定义样式
        //           color: "#ff9500",
        //           fontSize: "20px",
        //           border: "solid 1px #ff9500",
        //           borderRadius: "50px",
        //           padding: "5px 11px",
        //           backgroundColor: "rgba(255, 255, 255, 0.1)",
        //         },
        //       },
        //     ],
        //     area: {
        //       start: 0,
        //       end: 1,
        //     },
        //   },
        whitelist: [""]
      });
      // this.player.emit("resourceReady", [
      //   //   { name: "蓝光1080p", url: require("@/assets/video3.mp4") },
      //   //   { name: "超清", url: require("@/assets/video2.mp4") },
      //   //   { name: "高清", url: require("@/assets/video1.mp4") },
      //   {
      //     name: "流畅",
      //     url: "https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4",
      //   },
      // ]);
      let that = this;
      //视频生成结束
      this.player.on("waiting", () => {
        console.log(that.player.duration);
      });
    }
    // haha() {
    //   console.log(this.player.duration);
    // }
  }
};
</script>
<style scoped lang="scss">
>>> .xgplayer-skin-default .xgplayer-definition .name {
  left: 0;
}
>>> .xgplayer-skin-default .xgplayer-definition {
  margin-right: 10px;
}
>>> .xgplayer-skin-default .xgplayer-download .xgplayer-tips {
  margin-left: -10px;
}
</style>
